<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

	<style type="text/css">
	.pq-toolbar .pq-select-button
    {
        padding:4px 5px;
        min-width:200px;     
    }
    .pq-select-popup-cont
    {
        max-width:200px;
    }
	</style>
	
<script>
    $(function () {
        var columns = [
            { title: "Order ID", width: 100, dataIndx: "OrderID", hidden: true },
            { title: "Customer Name", width: 130, dataIndx: "CustomerName" },
            { title: "Product Name", width: 190, dataIndx: "ProductName" },
            { title: "Unit Price", width: 100, dataIndx: "UnitPrice", align: "right" },
            { title: "Quantity", width: 100, dataIndx: "Quantity", align: "right" },
		    { title: "Order Date", width: 100, dataIndx: "OrderDate" },
		    { title: "Required Date", width: 100, dataIndx: "RequiredDate", hidden: true },
		    { title: "Shipped Date", width: 100, dataIndx: "ShippedDate", hidden: true },
            { title: "ShipCountry", width: 100, dataIndx: "ShipCountry", hidden: true },
            { title: "Freight", width: 100, align: "right", dataIndx: "Freight" },
            { title: "Shipping Name", width: 120, dataIndx: "ShipName" },
            { title: "Shipping Address", width: 180, dataIndx: "ShipAddress", hidden: true },
            { title: "Shipping City", width: 100, dataIndx: "ShipCity" },
            { title: "Shipping Region", width: 110, dataIndx: "ShipRegion", hidden: true },
            { title: "Shipping Postal Code", width: 160, dataIndx: "ShipPostalCode", hidden: true }
		];
        var dataModel = {
            location: "remote",
            sorting: "local",
            dataType: "JSON",
            method: "GET",
            url: "/Content/invoice.json",
            getData: function (dataJSON) {
                return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON.data };
            }
        }

        $("div#grid_showhide_columns").pqGrid({
            width: "100%", 
            height: 500,
            dataModel: dataModel,
            pageModel: { type: 'local', rPP: 20, rPPOptions: [1, 10, 20, 30, 40, 50, 100] },
            scrollModel: {lastColumn: null},
            colModel: columns,
            create: function (evt, ui) {
                var CM = $(this).pqGrid('getColModel'),
                        opts = [];
                for (var i = 0; i < CM.length; i++) {
                    var column = CM[i];
                    if (column.hidden !== true) {
                        opts.push(column.dataIndx);
                    }
                }
                $(".columnSelector").val(opts);
                //disable the ShipCountry column.
                $(".columnSelector").find("option[value='ShipCountry']").prop('disabled', true);
                $(".columnSelector").pqSelect({
                    checkbox: true,
                    multiplePlaceholder: 'Select visible columns',
                    maxDisplay: 100,
                    width: 'auto'
                });
            },
            toolbar: {
                items: [//{ type: '<span>Select visible columns: </span>' },
                    { type: 'select', cls: 'columnSelector', options: function (ui) {
                        var CM = $(this).pqGrid('getColModel'),
                        opts = [];
                        for (var i = 0; i < CM.length; i++) {
                            var obj = {},
                            column = CM[i];
                            obj[column.dataIndx] = column.title;
                            opts.push(obj);
                        }
                        return opts;
                    }, listener: { 'change': function (evt) {
                        var arr = $(this).val(),
                        $grid = $(this).closest('.pq-grid'),
                        CM = $grid.pqGrid('getColModel');

                        for (var i = 0; i < CM.length; i++) {
                            var column = CM[i],
                            dataIndx = column.dataIndx + "";
                            if ($.inArray(dataIndx, arr) == -1) {
                                CM[i].hidden = true;
                            }
                            else {
                                CM[i].hidden = false;
                            }
                        }
                        $grid.pqGrid('refresh');
                    }
                    }, attr: "multiple='multiple'", style: "height:60px;"
                    }]
            },
            numberCell: { resizable: true, width: 40, title: "#", minWidth: 25 },
            title: "Shipping Orders",
            resizable: true
        });
    });
        
</script>    
</head>
<body>
In the below example, the columns can be hidden / shown using checkboxes in the pqSelect dropdown. 
Note that ShipCountry column is hidden in grid and disabled in pqSelect dropdown.
<div id="grid_showhide_columns"></div>

</body>

</html>
